<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<title>饼状图</title>

	<link th:href="@{https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css}" rel="stylesheet">
	<script th:src="@{https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js}"></script>
	<script th:src="@{https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js}"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery-resize/1.0/jquery.ba-resize.js"></script>
	<!-- 引入 echarts.js -->
	<script th:src="@{https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js}"></script>
</head>
<body>
<div class="panel panel-default" style="width: 100%;height: 60%" align="center">
	<div class="panel-heading" style="text-align:left;">
		<h3 >
			日常消费统计
		</h3>
	</div>
	<div class="container">
		<div class="row">
			<table class="table  mytable table-bordered">
				<thead>
				<tr>
					<td th:each="moneyList:${moneyList}" th:text="${moneyList.moneytag.moneytag}">日期</td>
					<td >小计</td>
				</tr>
				</thead>
				<tbody>
				<tr >
					<td th:each="moneyList:${moneyList}"  th:text="${moneyList.money}">2020-08-18 12:12:12</td>
					<td th:text="${money}">2020-08-18 12:12:12</td>
				</tr>
				</tbody>
			</table>

		</div>
	</div>

	<div class="panel-body ">
		<div id="main" style="height:450px;" align="center"></div>

		<script type="text/javascript">


			$(document).ready(function(){
				// 基于准备好的dom，初始化echarts实例
				var myChart = echarts.init(document.getElementById('main'));

				//数据加载完之前先显示一段简单的loading动画
				myChart.showLoading();
				var values=[];
				//数据加载完之前先显示一段简单的loading动画
				myChart.showLoading();
				$.ajax({
					type : "post",
					async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
					url : "[(@{/user/show})]",    //请求发送到dataActiont处
					data : {},
					dataType : "json",        //返回数据形式为json
					success : function(data) {
						console.log(data);
						//请求成功时执行该函数内容，result即为服务器返回的json对象
						if (data) {
							for(var i=0;i<data.length;i++){
								var test={"value":data[i].money, "name":data[i].moneytag.moneytag};
								values.push(test);

							}

							myChart.hideLoading();    //隐藏加载动画
							myChart.setOption(
									{
										title: {
											text: '日常消费占比',
											// subtext: '纯属虚构',
											left: 'center'
										},
										tooltip: {
											trigger: 'item',
											formatter: '{a} <br/>{b} : {c} ({d}%)'
										},
										legend: {
											orient: 'vertical',
											left: 'left',
											data: values
										},

										series: [//显示数据
											{
												name: '类别',
												type: 'pie',
												radius: '60%',
												center: ['50%', '50%'],
												data:values,
												itemStyle: {
													emphasis: {
														shadowBlur: 100,
														shadowOffsetX: 0,
														shadowColor: 'rgba(0, 0, 0, 0.5)'
													}
												}
											}
										],

									}
							);
							window.addEventListener("resize", function() {
								myChart.resize();
							});

						}
					},
					error : function(errorMsg) {
						//请求失败时执行该函数
						alert("图表请求数据失败!");
						myChart.hideLoading();
					}
				});//end ajax


			});//刷新方法结束


		</script>


	</div>

</div>



</body>
</html>